<template>
    <div class="category" ref="scrolla">
        <!-- 左侧分类列表start -->
        <ScrollView class="category-left">
            <ul @click.stop>
                <li
                    class="nav-box"
                    v-for="(item, index) in typeleft"
                    :key="index"
                    :class="{ 'active':checkType==index }"
                    @click="
                            
                            reloadRightData(item.maitKey,item.miniWallkey,index,item.title )"
                >
                    <span>{{ item.title }}</span>
                </li>
            </ul>
        </ScrollView>
        <!-- 左侧分类列表end -->

        <!-- 右侧分类列表start -->
        <ScrollView class="category-right">
            <div>
                <!-- HotSort组件start -->
                <TypeList :num="3" :list="typeright"></TypeList>
                <!-- HotSort组件end -->

                <!-- 综合分类start -->
                <div class="sales">
                    <span
                        :class=" { ck:sortType=='pop' } "
                        @click=" reloadList('pop') "
                    >综合</span>
                    <span
                        :class=" { ck:sortType=='sell' } "
                        @click=" reloadList('sell') "
                    >销量</span>
                    <span
                        :class=" { ck:sortType=='new' } "
                        @click=" reloadList('new') "
                    >新品</span>
                </div>
                <!-- 综合分类end -->

                <!-- YouLike组件start -->
                <YouLike class="likes-box" :docs="typeitem"></YouLike>
                <!-- YouLike组件end -->

                <!-- <div class="nextpage">
                    <input type="button" value="加载更多" @click="page = page+1,loadTypeDateitem()">
                </div>-->
            </div>
        </ScrollView>
        <!-- 右侧分类列表end -->
    </div>
</template>
<script>
import TypeList from "../components/TypeList";
import YouLike from "../components/YouLike";

export default {
    data() {
        return {
            checkType: 0,
            sortType: "pop",
            typeleft: [],
            typeright: [],
            page: 1,
            typeitem: [],
            fcid: "",
        };
    },
    methods: {
        loadTypeDataLeft() {
            this.$api
                .loadDataFormMtiget({
                    appPlat: "m",
                    pids: "117330"
                })
                .then((data) => {
                    // console.log(data);
                    this.typeleft = data[117330].list;
                    if (!data[117330].list[0]) {
                        return Promise.reject({ message: "数据加载失败" });
                    }
                    let pid = data[117330].list[0].maitKey;
                    let fcid = data[117330].list[0].miniWallkey;
                    this.fcid = fcid;
                    this.loadRightType(pid);
                    this.loadDataFormSearch(fcid);
                })
                .catch(this.$error);
        },
        loadRightType(pid) {
            this.$api
                .loadDataTypeforget({
                    appPlat: "m",
                    pid: pid
                })
                .then(data => {
                    // console.log(data);
                    this.typeright = data.list;
                });
        },
        loadDataFormSearch(fcid, sort="pop") {
            this.sortType = sort;
            this.$api
                .loadDataforsearch({
                    fcid: fcid,
                    page: 1,
                    sort: sort,
                    cKey: "h5-cube",
                })
                .then((data) => {
                    this.typeitem = data.wall.docs;
                })
                .catch(this.$error);
        },
        reloadRightData(pid, fcid, i) {
            this.typeright = [];
            this.typeitem = [];
            this.checkType = i;
            this.fcid = fcid;
            this.loadRightType(pid);
            this.loadDataFormSearch(fcid);
        },
        reloadList(sortKey){
            this.loadDataFormSearch(this.fcid,sortKey);
        }
    },
    components: {
        TypeList,
        YouLike
    },
    mounted() {
        this.loadTypeDataLeft();
    }
};
</script>
<style lang="less" scoped>
.category {
    position: absolute;
    width: 100%;
    top: @h;
    bottom: @h;
    overflow: hidden;
}
.category-left {
    position: absolute;
    overflow: hidden;
    background-color: @ef;
    width: 25%;
    height: 100%;
    .nav-box {
        box-sizing: border-box;
        height: 100px;
        // border: 1px solid red;
        line-height: 100px;
        display: flex;
        flex-direction: row;
        align-items: center;
        > span {
            box-sizing: border-box;
            width: 100%;
            height: 50%;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            font-weight: bold;
        }
    }
    .active {
        background-color: white;
        > span {
            border-left: 10px solid @pink;
        }
    }
}
.category-right {
    position: absolute;
    overflow: hidden;
    right: 0;
    width: 75%;
    height: 100%;
    background-color: white;
}

// youLike组件
.likes-box {
    ::v-deep .show-box {
        height: 500px;
        .showbox-img {
            height: 75%;
        }
    }
    ::v-deep .showbox-det {
        height: 12%;
    }
}
</style>